<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<meta
			name="description"
			content="JavaScript mouse effects that follow your cursor or finger!" />
		<link
			rel="icon"
			href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐭</text></svg>" />

		<link
			rel="stylesheet"
			href="./style.css" />
		<script  type="module"  src="./src/index.js"></script>
	</head>
	<body>
		<header><h1>90s Cursor Effects</h1></header>
		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Rainbow</span>
					</div>
					<div class="byline">A little color never hurt anyone</div>
				</div>
				<div
					id="rainbow"
					class="effect"></div>
			</div>
		</div>
		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>RainbowSpeed</span>
					</div>
					<div class="byline">A little color never hurt anyone</div>
				</div>
				<div
					id="rainbowSpeed"
					class="effect"></div>
			</div>
		</div>
		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Clock</span>
					</div>
					<div class="byline">An old classic, more ugly than useful, but lovable for sure</div>
				</div>
				<div
					id="clock"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Fairy Dust</span>
					</div>
					<div class="byline">An old classic, sprinkling stardust onto the page</div>
				</div>
				<div
					id="fairyDust"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Text Flag</span>
					</div>
					<div class="byline">A waving flag of text</div>
				</div>
				<div
					id="textFlag"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Ghost</span>
					</div>
					<div class="byline">A trailing of ghost cursors, as classic as they come</div>
				</div>
				<div
					id="ghost"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Trailing</span>
					</div>
					<div class="byline">An elasticish trail of cursors that will nip to wherever your mouse is</div>
				</div>
				<div
					id="trailing"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Following Dot</span>
					</div>
					<div class="byline">A dot that follows your mouse with a little lag, a modern look</div>
				</div>
				<div
					id="following"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Elastic Emoji</span>
					</div>
					<div class="byline">Guaranteed to provide fun for hours</div>
				</div>
				<div
					id="springs"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Emoji Rain</span>
					</div>
					<div class="byline">A nice modern dusting of emoji based particles</div>
				</div>
				<div
					id="emoji"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Bubbles</span>
					</div>
					<div class="byline">Bloop bloop bloop, you're under the sea</div>
				</div>
				<div
					id="bubbles"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Snowflakes</span>
					</div>
					<div class="byline">Winter is here, and it's brought snow with it</div>
				</div>
				<div
					id="snowflake"
					class="effect"></div>
			</div>
		</div>

		<div class="cursor">
			<div class="box">
				<div class="info">
					<div class="name">
						<span>Characters</span>
					</div>
					<div class="byline">Characters under your control</div>
				</div>
				<div
					id="character"
					class="effect"></div>
			</div>
		</div>
	 
	</body>
</html>
